<script setup>
import { h,ref } from "vue";
import {NButton, NTag} from "naive-ui";
import { AddOutline } from "@vicons/ionicons5"
import CommandForm from "@/components/CommandForm.vue";

const name = ref('')
const showModal = ref(false)
const pagination = false
const Tasks = ref()
const createColumns = ({play}) =>{
  return [
    {
      title: "任务",
      key: "name",
    },
    {
      title: "描述",
      key: "description"
    },
    {
      title: "指定目标",
      key: "target",
      render(row) {
        return row.target.map((tagKey) => {
          return h(
              NTag,
              {
                type: "info",
              },
              {
                default: () => tagKey
              }
          )
        })
      }
    },
    {
      title: "运行结果",
      key: "results"
    },
    {
      title: "操作",
      key: "actions",
      render(row) {
        return [h(
            NButton,
            {
              strong: true,
              type:"primary",
              tertiary: true,
              size: "small",
              onClick: () => play(row)
            },
            { default: () => "执行" }),
          h(NButton,
          {
            strong: true,
            tertiary: true,
            type:"info",
            size: "small",
            onClick: () => play(row)
          },
          { default: () => "编辑" }),
          h(NButton,
              {
                type:"error",
                strong: true,
                tertiary: true,
                size: "small",
                onClick: () => play(row)
              },
              { default: () => "删除" })]
      }
    }
  ]
}

const columns  = createColumns({
  play(row) {
    message.info(`Play ${row.name}`);
  }})

function handleSelect (key)  {
  if (String(key) === "open"){
    showModal.value = true
  }
}

const data =[
  {
    key: 0,
    name: "任务1",
    description: "根据24年4月仓库表，计算进出仓货值，及同比情况。",
    target:["D:\\迅雷下载\\QQ下载\\24年4月仓库表.xlsx","584648654","saefdsefsef4654s65e41f654se1f"],
    results:"2024年4月出仓货值为390元，同比下降50%。出仓货值为1410元，同比下降50% 。"
  },
  {
    key: 1,
    name: "任务2",
    description: "根据24年4月仓库表，计算进出仓货值，及同比情况。",
    target:["D:\\迅雷下载\\QQ下载\\24年4月仓库表.xlsx"],
    results:"2024年4月出仓货值为390元，同比下降50%。出仓货值为1410元，同比下降50% 。"
  },
  {
    key: 2,
    name: "任务3",
    description: "根据24年4月仓库表，计算进出仓货值，及同比情况。",
    target:["D:\\迅雷下载\\QQ下载\\24年4月仓库表.xlsx"],
    results:"2024年4月出仓货值为390元，同比下降50%。出仓货值为1410元，同比下降50% 。"
  },
];

const options = [
  {
    label: "选择命令",
    key: "marina bay sands",
    disabled: true
  },
  {
    label: "打开",
    key: "open"
  },
  {
    label: "图像识别",
    key: "image"
  },
  {
    label: "比佛利山庄酒店，洛杉矶",
    key: "the beverly hills hotel, los angeles"
  }]


</script>

<template>
  <n-tabs  class="no-drag auto" type="line" animated>
    <n-tab-pane name="manage" tab="管理">
      <n-data-table
          :bordered="false"
          :columns="columns"
          :data="data"
          :pagination="pagination"
      />
    </n-tab-pane>
    <n-tab-pane name="create" tab="创建">
      <n-list>
        <n-list-item v-for="(task,index) in Tasks" :key="index">
          <n-thing :title=task[0]>
            <n-flex vertical style="width: 550px">
              <n-tag type="info" v-for="com in task[1]">{{com}}</n-tag>
            </n-flex>
          </n-thing>


        </n-list-item>
      </n-list>
      <n-flex vertical>
        <n-input v-model:value="name" type="text" placeholder="名称" style="width: 200px"/>
        <n-dropdown trigger="hover" :options="options" @select="handleSelect">
          <n-button style="width: 50px">
            <n-icon size="20">
              <AddOutline />
            </n-icon>
          </n-button>
        </n-dropdown>
      </n-flex>
    </n-tab-pane>
  </n-tabs>

  <n-modal v-model:show="showModal">
    <n-card
        style="width: 600px"
        title="定义行为"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
    >
      <template #header-extra>
      </template>
      <CommandForm />
      <template #footer>

      </template>
    </n-card>
  </n-modal>



</template>

<style scoped>
.auto{
  box-sizing: border-box;
}
</style>
